import React from 'react';

import { ReactComponent as Chevron } from '@/assets/images/shared/icon-chevron.svg';
import { AttachmentDto } from '@/shared/interfaces/generated';
import { getImageUrl } from '@/shared/lib/images';
import { Button } from '@/shared/ui/Button';

import cs from './ChevronCard.module.scss';

type Props = {
  item: Partial<AttachmentDto>;
  openNewWindow?: (url: string) => void | undefined;
  courseId: number;
  onClick?: ((attachmentId: number, courseId: number) => Promise<void>) | (() => void);
};

export const ChevronCard = React.memo(({ item, openNewWindow, onClick, courseId }: Props) => (
  <div className={cs.pdfs}>
    <Button
      className={cs.desc}
      key={item.id}
      onClick={() => {
        openNewWindow && openNewWindow(getImageUrl(item.file) as string);
        onClick && onClick(item.id as number, courseId);
      }}
    >
      {item.name}
      <Chevron />
    </Button>
  </div>
));
